<template>
  <div id="echartFive">
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {

  data () {
    return {

    };
  },

  mounted () {
    this.initChart()
  },

  methods: {
    initChart () {
      this.echart = echarts.init(document.getElementById('echartFive'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          x:'10%',
          y:'5%',
          x2:'10%',
          y2:'10%'
        },
        yAxis: {
          type: 'category',
          data: ['科普类', '讲座类', '心血管', '心理治疗', '中医养生', '口腔医学', '艾滋病防控', '常见慢性疾病']
        },
        xAxis: {
          type: 'value',
          name: '人数/人'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 150],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                offset: 0,
                color: '#6EAFEB'
              }, {
                offset: 1,
                color: '#7FF0CE'
              }]),
              borderRadius: 5
            },
            // 设置条柱宽度
            barWidth: 10,
            type: 'bar'
          }
        ]
      }
      this.echart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
#echartFive {
  width: 560px;
  height: 260px;
}
</style>